<template>
	<!--通讯录搜索-->
	<view class="page-content">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 搜索 -->
			<w-tit leftIcon="arrowleft" color="#595757" background="#fff" fontweight="600" @confirm="rightSearch"
				rightIconNum="two" is_searchs="true">
			</w-tit>
		</view>

		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<!--动态-->
			<template v-if="datalist && datalist.length > 0">
				<view class="body-box">
					<block v-for="(item,index) in datalist" :key="index">
						<view class="body-box-top">{{item.no}}</view>
						<view class="body-cen-ul" v-for="(ite,ind) in item.pho" :key="ind">
							<view class="body-cen" @click.stop="todetail(ite.uid)">
								<view class="cen-box-l">
									<view class="img-box">{{(ite.name).substr((ite.name).length-1,1)}}</view>
									<view class="cen-box-l-txt">
										<view class="name">{{ite.name}}</view>
										<view class="mobile">{{ite.mobile}}</view>
									</view>
								</view>
								<view class="cen-box-r" @click.stop="tosel(ite.uid)" :style="{background:ite.statu?'#fff':'#198FFF',color:ite.statu?'#999':'#fff'}">{{ite.statu?'已邀请':'邀请'}}</view>
							</view>
						</view>
					</block>
				</view>
			</template>
			<!--无数据-->
			<template v-else>
				<view class="nodata">
					<view class="nodata-txt">联系人</view>
					<view class="nodata-txt">群聊</view>
				</view>
			</template>
		</scroll-view>

	</view>
</template>

<script>
	import wTit from '@/components/w-tit/w-tit-back-serch-add.vue'; //标题
	import chatList from '@/components/w-chat/chat-list.vue'; //聊天组件
	import loadMore from '@/components/uni-load-more/load-more.vue';
	export default {
		components: {
			wTit,
			chatList,
			loadMore
		},
		onShow() {
			//uni.removeTabBarBadge(OBJECT)
		},
		data() {
			return {
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				datalist: [{
						id: 1,
						no: 'A',
						name: '公司成员',
						pho: [{
							uid: 56,
							mobile: "1333333333",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "a张三"
						}, {
							uid: 57,
							mobile: "13344455522",
							head: '/static/img/im/face/face_2.jpg',
							statu: false,
							name: "a李四"
						}, {
							uid: 58,
							mobile: "13344455522",
							head: '/static/img/im/face/face_3.jpg',
							statu: true,
							name: "a王五"
						}, {
							uid: 59,
							mobile: "13344455522",
							head: '/static/img/im/face/face_4.jpg',
							statu: true,
							name: "a李六"
						}, {
							uid: 60,
							mobile: "13344455522",
							head: '/static/img/im/face/face_5.jpg',
							statu: true,
							name: "a王七"
						}, {
							uid: 61,
							mobile: "16888888888",
							head: '/static/img/im/face/face_6.jpg',
							statu: false,
							name: "a老王"
						}, {
							uid: 62,
							mobile: "16888888888",
							head: '/static/img/im/face/face_7.jpg',
							statu: false,
							name: "a吴三"
						}, {
							uid: 63,
							mobile: "16888888888",
							head: '/static/img/im/face/face_8.jpg',
							statu: false,
							name: "a吴邪"
						}, {
							uid: 64,
							mobile: "16888888888",
							head: '/static/img/im/face/face_9.jpg',
							statu: false,
							name: "a安顺"
						}, {
							uid: 65,
							mobile: "16888888888",
							head: '/static/img/im/face/face_10.jpg',
							statu: false,
							name: "a潘安"
						}, {
							uid: 338,
							mobile: "16888888888",
							head: '/static/img/im/face/face_11.jpg',
							statu: false,
							name: "a阿城"
						}, {
							uid: 339,
							mobile: "16888888888",
							head: '/static/img/im/face/face_12.jpg',
							statu: false,
							name: "安福"
						}, {
							uid: 340,
							mobile: "16888888888",
							head: '/static/img/im/face/face_13.jpg',
							statu: false,
							name: "安吉"
						}, {
							uid: 341,
							mobile: "16888888888",
							head: '/static/img/im/face/face_14.jpg',
							statu: false,
							name: "安宁"
						}, {
							uid: 342,
							mobile: "16888888888",
							head: '/static/img/im/face/face_15.jpg',
							statu: false,
							name: "安丘"
						}],
					},
					{
						id: 2,
						no: 'B',
						name: '设计部',
						pho: [{
							uid: 1,
							mobile: "16888888888",
							head: '/static/img/im/face/face_19.jpg',
							statu: false,
							name: "北京"
						}, {
							uid: 66,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "白城"
						}, {
							uid: 67,
							mobile: "16888888888",
							head: '/static/img/im/face/face_2.jpg',
							statu: false,
							name: "百色"
						}, {
							uid: 68,
							mobile: "16888888888",
							head: '/static/img/im/face/face_3.jpg',
							statu: true,
							name: "白山"
						}, {
							uid: 69,
							mobile: "16888888888",
							head: '/static/img/im/face/face_4.jpg',
							statu: false,
							name: "白银"
						}, {
							uid: 70,
							mobile: "16888888888",
							head: '/static/img/im/face/face_5.jpg',
							statu: false,
							name: "蚌埠"
						}, {
							uid: 71,
							mobile: "16888888888",
							head: '/static/img/im/face/face_6.jpg',
							statu: false,
							name: "保定"
						}],
					},
					{
						id: 3,
						no: 'C',
						name: '产品部',
						pho: [{
							uid: 2,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "重庆"
						}, {
							uid: 5,
							mobile: "16888888888",
							head: '/static/img/im/face/face_2.jpg',
							statu: false,
							name: "长春"
						}, {
							uid: 6,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "长沙"
						}, {
							uid: 7,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "常州"
						}, {
							uid: 8,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "成都"
						}, {
							uid: 84,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "沧州"
						}, {
							uid: 85,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "常德"
						}, {
							uid: 86,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "昌都"
						}, {
							uid: 87,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "昌吉"
						}],
					},
					{
						id: 4,
						no: 'D',
						name: '产品部',
						pho: [{
							uid: 25,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "昆明"
						}, {
							uid: 174,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "开封"
						}, {
							uid: 175,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "喀什地"
						}, {
							uid: 176,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "克拉玛依"
						}, {
							uid: 177,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "克孜勒"
						}, {
							uid: 555,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "开化"
						}, {
							uid: 556,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "开平"
						}, {
							uid: 557,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "开县"
						}, {
							uid: 558,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "开阳"
						}, {
							uid: 559,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "康平"
						}, {
							uid: 560,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "垦利"
						}, {
							uid: 561,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "lis"
						}]
					}, {
						id: 5,
						no: 'E',
						name: '产品部',
						pho: [{
							uid: 203,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "张三"
						}, {
							uid: 204,
							mobile: "16888888888",
							head: '/static/img/im/face/face_1.jpg',
							statu: false,
							name: "茂名"
						}]
					}],
				user_statu: {
					add_statu: false,
					replace_statu: false,
					stick_del_statu: false
				},
			}
		},
		methods: {
			//跳转聊天界面
			tomsg(id, name, type) {
				uni.navigateTo({
					url: `/pages/message/messageInfo?id=${id}&name=${name}&type=${type}`
				})
			},
			loadmore(){
				
			},
			//跳转详细页
			todetail(uid){
				uni.navigateTo({
					url:`/pages/contact/contactDetailInfo?id=${uid}`
				})
			},
			//邀请
			tosel(uid){
				
			},
			rightSearch() {
				console.log(33)
				this.datalist = [{
						id: 1,
						no: 'A',
						name: '公司成员',
						pho: [ {
							uid: 59,
							mobile: "13344455522",
							head: '/static/img/im/face/face_4.jpg',
							statu: true,
							name: "a李六"
						}, {
							uid: 60,
							mobile: "13344455522",
							head: '/static/img/im/face/face_5.jpg',
							statu: true,
							name: "a王七"
						}, {
							uid: 61,
							mobile: "16888888888",
							head: '/static/img/im/face/face_6.jpg',
							statu: false,
							name: "a老王"
						}]
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-body {
			height: calc(100% - 90rpx - var(--status-bar-height));

			.nodata {
				display: flex;
				margin-top: 20rpx;

				.nodata-txt {
					text-align: center;
					flex: 1;
					font-size: 32rpx;
					font-weight: 400;
					color: $font-color-gray6;
					border-right: 1rpx solid #ddd;
				}
			}

			.body-box {
				display: flex;
				flex-direction: column;
				background: $uni-bg-color;

				.body-box-top {
					margin-bottom: 20rpx;
					background: $uni-bg-color-grey;
					font-size: 28rpx;
					font-weight: bold;
					line-height: 60rpx;
					color: $font-color-3;
					padding: 0 30rpx;
				}
				.body-cen-ul{
					display: flex;
					flex-direction: column;
					padding: 0 30rpx;
					.body-cen {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30rpx;
						.cen-box-l{
							display: flex;
							.img-box{
								width: 80rpx;
								height: 80rpx;
								margin-right: 26rpx;
								background: #198FFF;
								border-radius: 10rpx;
								font-size: 32rpx;
								font-weight: 400;
								text-align: center;
								line-height: 80rpx;
								color: $font-color-w;
							}
							.cen-box-l-txt{
								display: flex;
								flex-direction: column;
								.name{
									font-size: 32rpx;
									font-weight: 400;
									line-height: 40rpx;
									color: $font-color-3;
									margin-bottom: 10rpx;
								}
								.mobile{
									font-size: 28rpx;
									line-height: 30rpx;
									font-weight: 400;
									color: $font-color-9;
								}
							}
						}
						.cen-box-r {
							height: 60rpx;
							width: 120rpx;
							line-height: 60rpx;
							text-align: center;
							border-radius: 6rpx;
							font-size: 28rpx;
							font-weight: 400;
						}
					}
				}
			}
		}

		.page-top {
			display: flex;
			flex-direction: column;
			box-sizing: content-box;
			background: $uni-bg-color;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 9999;
		}
	}
</style>
